<template>
  <div class="demo-layout">
    <el-dialog
      title="服务方选择"
      :visible.sync="showModal"
      width="900px"
      center
      :close-on-click-modal="false"
    >
      <el-form :model="search" ref="searchForm" class="el-form-col">
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item prop="workerName">
              <el-input v-model="search.workerName" clearable placeholder="服务方">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="workerPhone">
              <el-input v-model="search.workerPhone" clearable placeholder="服务方电话">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="plateNumber">
              <el-input v-model="search.plateNumber" clearable placeholder="车牌号">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click.prevent="getTable" :loading="loading">查 询</el-button>
              <el-button @click.prevent="reset('searchForm')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            style="width: 100%"
            stripe>
            <el-table-column
              align="center"
              prop="workerName"
              label="服务方">
            </el-table-column>
            <el-table-column
              align="center"
              prop="workerPhone"
              label="服务方电话">
            </el-table-column>
            <el-table-column
              align="center"
              prop="district"
              width="180"
              label="服务范围">
              <template slot-scope="scope">
                {{scope.row.province}} {{scope.row.city}} {{scope.row.district}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="business"
              label="业务类型">
            </el-table-column>
            <el-table-column
              align="center"
              prop="carType"
              label="车辆类型">
              <template slot-scope="scope">
                {{scope.row.carType | filterDataBaseDictionary}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="plateNumber"
              label="车牌号">
            </el-table-column>
            <el-table-column
              align="center"
              width="90"
              label="操作">
              <template slot-scope="scope">
                <el-button type="success"
                           :disabled="$parent.frequency"
                           @click="checkWorkerFun(scope.row)"
                           size="mini"
                >选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div style="padding: 1rem">
            <Pagination class="pull-right" :total-item="totalItem" @pagination="pagination" @sizeChange="sizeChange" :perItem="search.pageSize"></Pagination>
            <div class="clearfix"></div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import {getCPZcarType, getInstallServiceType} from '@/utils/selectOptions'
import {copy} from '@/utils'
import {filterDataBaseDictionary} from '@/filters'
export default {
  name: 'CheckWorkerModal',
  props: {},
  filters: {
    filterDataBaseDictionary
  },
  components: {
    Pagination
  },
  data() {
    return {
      totalItem: 0,
      carTypeArr: [],
      serviceNoArr: '',
      showModal: false,
      loading: false,
      search: {
        pageSize: 20,
        pageNum: 1,
        workerName: '',
        workerPhone: '',
        plateNumber: ''
      },
      tableData: []
    }
  },
  created() {
    getCPZcarType().then(arr => {
      this.carTypeArr = arr
    })
    getInstallServiceType().then(arr => {
      this.serviceNoArr = arr
    })
  },
  methods: {
    copy,
    // 分页
    reset() {
      this.$refs.searchForm.resetFields()
    },
    pagination(page) {
      this.search.pageNum = page
    },
    // 页面大小变化
    sizeChange(size) {
      this.search.pageSize = size
    },
    show() {
      this.showModal = true
      this.$parent.frequency = false
      this.getTable()
    },
    hide() {
      this.showModal = false
    },
    getTable() {
      this.$ajax.table('/ms-warehouse-order/pickUp-dispatch/get-worker-list', this.search).then(response => {
        this.tableData = response.data || []
        this.totalItem = response.totalItem
      })
    },
    checkWorkerFun(row) {
      this.$parent.frequency = true
      this.$emit('checkWorker', row)
    }
  }
}
</script>
